// 后端主页
<template>
  <div id="index" style="width:100%;height:100%;background-color:#3b4551;text-align: center;">
    <div style="padding-top:100px">
    <!-- 左边的数据 -->
        <div style="width:250px;display:inline-block" id="left_nav">
          <el-card class="box-card" @click.native="_=>{$router.push('/admin/log/register')}">
            <p style="font-size:12px;margin-top:15px">今日注册数量</p>
            <h1>{{data?data.register.count:0}}</h1>
          </el-card>

          <el-card class="box-card" @click.native="_=>{$router.push('/admin/log/login')}">
            <p style="font-size:12px;margin-top:15px">今日登录数量</p>
            <h1>{{data?data.login.count:0}}</h1>
          </el-card>

          <el-card class="box-card" @click.native="_=>{$router.push('/admin/back')}">
            背景图片
          </el-card>

          <el-card class="box-card" @click.native="()=>{$router.push('/admin/user_list')}">
            <h3 style="margin-top:25px">用户详情</h3> 
          </el-card>
        </div>
        <!-- 右边选项 -->
        <div id="right_nav" style="margin-left:20px">
          <el-card class="box-card">
            <el-switch
              v-model="login_bool.status"
              inactive-text="登录功能"
              style="height:30px;width:200px"
              @change='setConfig("login_bool",)'
              >
            </el-switch>
            <el-switch
              v-model="register_bool.status"
              inactive-text="注册功能"
              style="height:30px;width:200px;margin-top:10px"
              @change='setConfig("register_bool")'
              >
            </el-switch>
            <div style="margin-top:300px">
              <!-- <p>当前时间</p> -->
              <p>{{time}}</p>
            </div>

          </el-card>
        </div>
    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{
      // data:{login:{count:0},register:{count:0}},
      data:'',
      //是否开启登录功能
      login_bool:'',
      //是否开启注册功能
      register_bool:'',
      time:"",
    }
  },
  methods:{
    //获取主页数据
    getData(){ 
      this.$axios.post(this.$API.GETINDEXDATA).then(res=>{
        console.log(res);
        if(res.code==200){
          //数据获取成功
          this.data = res.data;
          this.login_bool=res.data.login_config;
          this.register_bool=res.data.register_config;
          this.login_bool.status=this.login_bool.status?true:false;
          this.register_bool.status=this.register_bool.status?true:false;
        }
      });
    },
    //询问是否更改配置
    setConfig(bool){
      this.$confirm('是否更改此配置', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //开始调用配置接口
            this.$axios.post(this.$API.SETCONFIG,{
              configId:this[bool].id,
              status:this[bool].status?1:0,
            }).then(res=>{
              console.log(res);

            });


        }).catch(() => {
          //取消设置
          this[bool].status = !this[bool].status;    
        });

    }

  },
  created(){
    //获取数据
    this.getData();

    setInterval(()=>{
      this.time = new Date();
    },1000);

    
  }
}
</script>

<style scoped>
#left_nav > div{
  width:250px;  
  height:120px;
  margin-top:20px
}

#right_nav{
  width:250px;
  display:inline-block;
}
#right_nav >>> div{
  height: 545px;
}
</style>